﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/area_echarts.js"></script>
<link rel="stylesheet" href="css/comon0.css">
<link rel="stylesheet" href="css/total.css">
</head>
	<script>	
		$(document).ready(function(){
			var whei=$(window).width()
			$("html").css({fontSize:whei/20})
			$(window).resize(function(){
				var whei=$(window).width()
			 $("html").css({fontSize:whei/20})
		});
		});
	</script>
	<script type="text/javascript" src="js/echarts.min.js"></script> 
	<script>
		
	</script>
<body>
	<div class="loading" >
  	<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
	</div>
	<div class="canvas" style="opacity: .3">
		<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
	</div>
<div class="head">
  <h1>智慧工地综合展示大屏</h1>
  <div class="weather"><img src="images/s.png" height="10" width="10"><span>多云转小雨</span><span id="showTime"></span></div>
	<script>
		var t = null;
    	t = setTimeout(time,1000);//開始运行
    	function time() {
			clearTimeout(t);//清除定时器
			dt = new Date();
				var y=dt.getFullYear();
				var mt=dt.getMonth()+1;
				var day=dt.getDate();
			var h=dt.getHours();//获取时
			var m=dt.getMinutes();//获取分
			var s=dt.getSeconds();//获取秒
			document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+h+"时"+m+"分"+s+"秒";
			t = setTimeout(time,1000); //设定定时器，循环运行     
    	} 
	</script>
</div>
<div class="mainbox">
  	<ul class="clearfix">
    <li>
		<!-- 总计 -->
		<div class="boxall" style="height: 3.0rem">
		  	<div class="alltitle">出土数总览（车次）</div>
		 	<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">12</h2>
						<span style="color: greenyellow">一区</span>
					</li>
					<li>
						<h2 style="color: lightblue">8</h2>
						<span style="color: lightblue">二区</span>
					</li>
					<li>
						<h2 style="color: green">11</h2>
						<span style="color: green">三区</span>
					</li>
					<li>
						<h2 style="color: chocolate">9</h2>
						<span style="color: chocolate">四区</span>
					</li>
					<li>
						<h2 style="color: slateblue">15</h2>
						<span style="color: slateblue">五区</span>
					</li>
					<li>
						<h2 style="color: red">55</h2>
						<span style="color: red">出土总数</span>
					</li>
				</ul>
        	</div>
        	<div class="boxfoot"></div>
      	</div>
		<!-- A区统计 -->
      	<div class="boxall">
			<div class="alltitle alltitle2">卸土数总览（车次）</div>
			<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">15</h2>
						<span style="color: greenyellow">土堆A</span>
					</li>
					<li>
						<h2 style="color: lightblue">22</h2>
						<span style="color: lightblue">土堆B</span>
					</li>
					<li>
						<h2 style="color: chocolate">18</h2>
						<span style="color: chocolate">土堆C</span>
					</li>
					<li>
						<h2 style="color: red">55</h2>
						<span style="color: red">卸土总数</span>
					</li>
				</ul>
			</div>	
			<div class="boxfoot"></div>
      	</div>
		<!-- B区统计 -->
	  	<div class="boxall" style="height: 2.85rem">
        	<div class="alltitle alltitle2">安全监测-报警数据（次数）</div>
			<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">12</h2>
						<span style="color: greenyellow">工地一</span>
					</li>
					<li>
						<h2 style="color: lightblue">4</h2>
						<span style="color: lightbluered">工地二</span>
					</li>
					<li>
						<h2 style="color: chocolate">6</h2>
						<span style="color: chocolate">工地三</span>
					</li>
					<li>
						<h2 style="color: red">22</h2>
						<span style="color: red">报警总数</span>
					</li>
				</ul>
			</div>											
        	<div class="boxfoot"></div>
      	</div>
    </li>
	<!-- 中间区域 -->
    <li>
      	<div class="map">
			<div class="map1"><img src="images/lbx.png"></div>
			<div class="map2"><img src="images/jt.png"></div>
			<div class="map3"><img src="images/map.png"></div>
			<div class="map4" id="map_1"></div>
      	</div>
		<div class="boxall">
			<div class="alltitle">数据统计</div>
			<div class="allnav" style="height: 2rem; " id="echartDemo">
			</div>
			<div class="boxfoot"></div>
		</div>
    </li>
	<!-- 右侧区域 -->
    <li> 
      	<div class="boxall">  
			<div class="alltitle ">人员考勤统计</div>
			<div class="sycm4">
				<ul class="clearfix">
					<li>
						<h2 style="color: greenyellow">121</h2>
						<span style="color: greenyellow">工地一</span>
					</li>
					<li>
						<h2 style="color: lightblue">49</h2>
						<span style="color: lightbluered">工地二</span>
					</li>
					<li>
						<h2 style="color: chocolate">88</h2>
						<span style="color: chocolate">工地三</span>
					</li>
					<li>
						<h2 style="color: red">258</h2>
						<span style="color: red">人员总数</span>
					</li>
				</ul>
			</div>
			<div class="boxfoot"></div>
      	</div>	
		<div class="boxall" >
			<div class="alltitle alltitle2">门禁数据明细</div>
			<div class="allnav left2_table" id="gongdi2" style="height: 2.2rem ">
				<ul>
					<li>
						<div class="zhtc_table_li_content">
							<div>李四</div>
							<div>2024-07-12 08:30:34</div>
							<div><img width="80" src="images/gongdi/301.png" /></div>
							<div>工地一</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>张三</div>
							<div>2024-07-12 07:30:34</div>
							<div><img width="80" src="images/gongdi/302.png" /></div>
							<div>工地一</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>王五</div>
							<div>2024-07-12 06:32:54</div>
							<div><img width="80" src="images/gongdi/303.png" /></div>
							<div>工地一</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>尚好</div>
							<div>2024-07-12 08:35:22</div>
							<div><img width="80" src="images/gongdi/304.png" /></div>
							<div>工地一</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>赵六</div>
							<div>2024-07-12 07:50:34</div>
							<div><img width="80" src="images/gongdi/305.png" /></div>
							<div>工地二</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div>皇后</div>
							<div>2024-07-12 07:20:34</div>
							<div><img width="80" src="images/gongdi/304.png" /></div>
							<div>工地三</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div>图们</div>
							<div>2024-07-12 07:19:34</div>
							<div><img width="80" src="images/gongdi/305.png" /></div>
							<div>工地三</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="boxfoot"></div>
		</div>
      	<div class="boxall" style="height: 2.9rem;">
        	<div class="alltitle">报警数据明细 </div>
			<div class="allnav left2_table" id="gongdi1">
				<ul>
					<li>
						<div class="zhtc_table_li_content">
							<div style="color: brown;">未戴安全帽</div>
							<div><img width="80" src="images/gongdi/001.png" /></div>
							<div>工地一</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div style="color: brown;">未戴安全帽</div>
							<div><img width="80" src="images/gongdi/101.png" /></div>
							<div>工地二</div>
						</div>
					</li>
					<li>
						<div class="zhtc_table_li_content">
							<div style="color: brown;">未戴安全帽</div>
							<div><img width="80" src="images/gongdi/102.png" /></div>
							<div>工地三</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div style="color: brown;">未戴安全帽</div>
							<div><img width="80" src="images/gongdi/102.png" /></div>
							<div>工地二</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div style="color: brown;">未戴安全帽</div>
							<div><img width="80" src="images/gongdi/101.png" /></div>
							<div>工地二</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div style="color: brown;">未戴安全帽</div>
							<div><img width="80" src="images/gongdi/101.png" /></div>
							<div>工地二</div>
						</div>
					</li>
					<li class="bg">
						<div class="zhtc_table_li_content">
							<div style="color: brown;">未戴安全帽</div>
							<div><img width="80" src="images/gongdi/102.png" /></div>
							<div>工地三</div>
						</div>
					</li>
				</ul>
			</div>
        	<div class="boxfoot"></div>
      	</div>
    </li>
  </ul>
</div>
<div class="back"></div>
	    

		

<script language="JavaScript" src="js/js.js"></script> 
<script src="js/jquery.liMarquee.js"></script> 	
<script type="text/javascript" src="js/init.js"></script>
<script>
	$(function(){
		$('.scrollDiv').liMarquee({
			direction: 'up',
			scrollamount: 30,
			runshort: false
		});
	});
</script> 
</body>
</html>
